<template>
 <view>
 <view class="goods-list">
 <block v-for="(item, i) in goodslist" :key="i" @click="gotoDetail(item.goods_id)">
<my-goods :goods='item'></my-goods>
 </block>
 </view>
 </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj:{
          // 查询关键字
          query:'',
          // 商品分类ID
          cid:'',
          // 页码值
          pagenum:1,
          // 每条显示多少条数据
          pagesize:10,
        },
        // 商品列表数据
        goodslist:[],
        // 总数量，用来实现分页
        total:0,
        // 是否正在发送请求
        isloading:false,
      };
    },
    onLoad(options){
      // 将页面参数存储到this.queryObj对象里
      this.queryObj.query = options.query ||''
      this.queryObj.cid = options.cid || ''
      // 定义获取数据的方
      this.getGoodsList()
    },
    methods:{
      // 点击跳转详情页
     gotoDetail(goods_id){
       console.log(goods_id)
       uni.navigateTo({
         url:'../goods_detail/goods_detail?goods_id='+goods_id
       })
     },
      //获取列表数据的方法
     async getGoodsList(cb){
       // 打开节流阀
       this.isloading = true
        // 发送请求
     const {data :res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
     
     // 关闭节流阀
     this.isloading = false
     cb && cb()
     // console.log(res)
     if(res.meta.status !== 200) return uni.$showMsg()
     // 进行赋值 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
     this.goodslist = [...this.goodslist,...res.message.goods]
     this.total = res.message.total
      },
    },
    
    
    
    // 触底事件
    onReachBottom(){
      // 判断是否还有下一页数据
      if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完成')
      // 判断是否正在请求其他数据，如果是，则不发送其他额外的请求
      if(this.isloading) return
      // 让页码加1
      this.queryObj.pagenum+=1
      // 重新获取数据
      this.getGoodsList()
    },
    // 下拉事件
    onPullDownRefresh(){
      // 重置关键数据
      this.queryObj.pagenum = 1
      this.total = 1
      this.isloading = false
      this.goodslist = []
      
      // 重新发起请求
      this.getGoodsList(()=>uni.stopPullDownRefresh())
    }
  }
</script>

<style lang="scss">

</style>
